<template>
	<view>
		
		<u-popup :show="nullshow" mode="center" :round="18">
			<view class="popup pr xflex-y-center xjc">
			
				<view class="popup-title xmt40">
					提示
				</view>
		
				<view class="popup-content xmt50">
					功能开发中
				</view>
				<view class="popup-btn" @click="onhui">
					我知道了
				</view>
			</view>
		</u-popup>
		<z-paging ref="paging" v-model="dataList" @query="queryList">

			<template #top>
				<u-tabs :list="list" :scrollable="false" :current="current" @change="handleTabChange"  @click="click"></u-tabs>
			</template>


			<view class="user" v-for="(item,index) in dataList" :key="index" @click.stop="topage(item)">
				<view class="user-top xflex-x">
					<image class="avatar xmr20" :src="item.user.avatar" mode=""></image>
					<view class="info">
						<view class="name">
							{{item.user.nickname}}
						</view>
						<view class="time xmt12">
							{{item.createtime}}
						</view>
					</view>
				</view>
				<view class="content xmt40 clamp2">
					{{item.content}}
				</view>

				<view class="xmt32">
					<image class="img xmr10" v-for="(itm,indx) in item.images" :src="itm" mode="" :key="indx"></image>
				</view>

				<view class="xflex-x-between xmt32">
					<view class="left xflex-x">
						<image class="left-icon" src="/static/image/car/ll.png" mode=""></image>
						<view class="text">
							{{item.view}}
						</view>
					</view>
					<view class="xflex-x">
						<view class="xflex-x xmr32">
							<image class="left-icon" src="/static/image/car/pl.png" mode=""></image>
							<view class="text">
								{{item.comments_count}}
							</view>
						</view>

						<view class="xflex-x" @click.stop="getlike(item)">
							<image v-if="item.zan == 0" class="left-icon" src="/static/image/car/dz.png" mode=""></image>
							<image v-if="item.zan == 1" class="left-icon" src="/static/image/car/icon_dz_s@2x.png" mode=""></image>
							<view class="text">
								{{item.like}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!--  -->
		</z-paging>
		<image class="fx" src="/static/image/car/fx.png" @click.stop="topages('/pages/mine/dispatch/dispatch')" mode=""></image>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {articleList,infolike} from '@/network/home.js'
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh,
		
	} from '@dcloudio/uni-app';
	let list = [{
			name: '信息广场'
		},
		{
			name: '会员活动',
			 disabled: true
		},
		{
			name: '悦生活',
			 disabled: true
		},
		{
			name: '公益',
			 disabled: true
		}
	]
	
	const getlike = (item) =>{
		infolike({article_id:item.id}).then(res=>{
			paging.value.reload()
		})
	}
	
	const topage = (item) =>{
		uni.navigateTo({
			url:'/pages/cart/detail?id=' + item.id
		})
	}
	
	const handleTabChange = ()=>{
		return
	}
	
	onShow(()=>{
		paging.value.reload()
	})
	
	const topages = (url) =>{
		uni.navigateTo({
			url:url
		})
	}
	
	let current = ref(0)
	let nullshow = ref(false)
	const click = (e) =>{
		
		
		if(e.index != 0){
			nullshow.value = true
			
			current.value = 0
		}
		
		console.log(current);
		console.log(e);
	}
	
	const onhui = () =>{
		current.value = 0,
		nullshow.value = false
	}

	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		articleList({
			page_no:pageNo,
			page_size:pageSize
		}).then(res => {
			console.log(res.data.lists);
			// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
			paging.value.complete(res.data.lists);
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}
</script>

<style lang="scss" scoped>
	.avatar {
		width: 70rpx;
		height: 70rpx;
		background-color: #333;
		border-radius: 50%;
	}

	.info {}

	.user {
		border-top: 1rpx solid #EAE9EE;
		padding: 30rpx 28rpx;
	}

	.name {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}

	.time {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.content {
		width: 682rpx;
		height: 65rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 36rpx;
	}

	.img {
		width: 200rpx;
		height: 200rpx;
		background: #FF6D00;
		border-radius: 10rpx;
		border: 1px solid #EEEEEE;

	}

	.left {

		&-icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 11rpx;
		}

	}

	.text {
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
	}

	.fx {
		position: fixed;
		width: 139rpx;
		height: 139rpx;
		right: 20rpx;
		bottom: 77rpx;
	}
	.popup {
		width: 600rpx;
		height: 370rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	
		&-gb {
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			right: 30rpx;
		}
	
		&-title {
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
		}
	
		&-content {
			padding: 32rpx;
			width: 492rpx;
			height: 149rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}
		
		&-btn {
			width: 240rpx;
			height: 80rpx;
			background-color: rgb(211,42,58);
			border-radius: 20rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
		}
	}
</style>